<template>
  <div class="shop">
    <div class="shop-list"
         v-if="index%2 !== 1"
         v-for="(item,index) in page.list">
      <div class="shop-list-per"
           v-for="(itemSub, indexSub) in 2"
           v-if="index + indexSub < page.list.length"
           @click="goDetails(page.list[index+indexSub])">

        <img :src="page.list[index+indexSub].img">
        <div class="title">{{page.list[index+indexSub].pdname}}</div>
        <div class="price">{{page.list[index+indexSub].psprice | math-mul(page.list[index+indexSub].discount)
          | math-round(2,1) | math-money}}/元{{page.list[index+indexSub].pdunit}}</div>

      </div>
    </div>
    <span class="loadding-end"
          ref="end"
          v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

    <div class="loadding-up"
         v-if="(page.loading && page.more)&&page.list.length > 0">
      <div class="loadding-up-div"></div>
    </div>

    <error-page :imgWidth="400"
                :imgHeight="346"
                top="91"
                emptyImg="empty-building"
                :type="'text'"
                emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>正在建设中...</span>"
  
                v-if="page.loaded && page.list.length === 0" />
  </div>
</template>

<script>
import pageList from '@/components/common-js/page-list'
import ErrorPage from '@/components/error-page'
export default {
  name: 'shop',
  mixins: [pageList],
  data () {
    return {
      searchData: {},
      url: '/tProduct/list.json'
    }
  },
  destroyed () {
  },
  async mounted () {
    await this.requestNet()
    this.pull()
  },
  methods: {
    async requestNet () {
      await this.loadPageList(this.url)
    },
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    },
    goDetails (item) {
      this.$router.push({name: 'productdetails', query: {pdid: item.pdid}})
    }
  },
  components: {
    ErrorPage
  }
}
</script>


<style lang="stylus" scoped>
.shop {
  // display: flex;
  width: 100%;
  height: 84.5vh;
  padding-top: 14px;
  background: rgba(245, 245, 245, 1);
  overflow: hidden;
  overflow-y: scroll;

  // padding-bottom: 30px;
  .shop-list {
    display: flex;
    // width: 100%;
    margin-top: 8px;

    // margin-left: 10px;

    // background: rgba(245, 245, 245, 1);
    .shop-list-per {
      width: 360px;
      background: white;
      display: flex;
      margin-left: 9px;
      flex-direction: column;
      align-items: center;
      height: 400px;

      img {
        width: 360px;
        height: 295px;
      }

      .title {
        font-size: 28px;
        color: rgba(51, 51, 51, 1);
        margin-top: 10px;
      }

      .price {
        margin-top: 5px;
        padding-bottom: 20px;
        font-size: 26px;
        color: rgba(174, 42, 38, 1);
      }
    }
  }
}
</style>
